<template>
	<view class="">
		<view class="" style="padding-bottom: 160rpx;">
			<!--  -->
			<view class="mainpadding radius ffffff margin_top">
				<view class="flexbetween"  @click="tzpjxq(dataAll.id)">
					<view class="flexleft">
						<image class="touxiag margin_right2" :src="dataAll.user.avatar_text" mode=""></image>
						<view class="">
							<view class="zhonghei sanshier ">{{dataAll.user.nickname}}</view>
							<view class="xiaohui ershil margin_top1 ">{{dataAll.createtime_text}}</view>
						</view>
					</view>
					<u-rate :value="dataAll.star" activeColor="#ff9341" readonly></u-rate>
				</view>
				<view class="xiaohui ershiba margin_top"  @click="tzpjxq(dataAll.id)">{{dataAll.content}}</view>
				<template v-if="dataAll.video_url_text">
					<video class="scyyzz margin_top" :id="'video'+index" :src="dataAll.video_url_text"
						@play.stop="videoplay(index)"></video>
				</template>
				<view class="flexleft flex_wrap pdl">
					<view class="flexcenter tpbox " v-for="(ite,ind) in dataAll.images_text" :key="ind">
						<view class="tjtp">
							<image class="" :src="ite" mode="" @click.stop="lbtpriview(ind,dataAll.images_text)"></image>
						</view>
					</view>
				</view>
				<view class="huibox margin_top mainpadding" v-if="dataAll.reply_content">
					<view class="xiaohui ershiba">商家回复：
						<text class="xiaohei ershiba">{{dataAll.reply_content}}</text>
					</view>
				</view>
				<view class="huibox margin_top mainpadding" v-if="dataAll.zp_content">
					<view class="xiaohui ershiba">追评：
						<text class="xiaohei ershiba">{{dataAll.zp_content}}</text>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="ffffff mainpadding margin_top" v-if="list.total">
				<view class="ershiba zhonghei fonweight">评论（{{list.total}}）</view>
				<view class="xiahuaxian margin_top" v-for="item in list.data" :key="item.id"
					@click="focus=true;pid=item.id">
					<view class="flextop" style="justify-content: flex-start;">
						<image class="pldtx margin_right2" :src="item.user.avatar_text" mode=""></image>
						<view class="">
							<view class="titletext xiaohui ">{{item.user.nickname}}</view>
							<view class="strongtext xiaohei margin_top1">{{item.content}}</view>
							<view class="smalltext xiaohui margin_top1">{{item.createtime_text}}</view>
						</view>
					</view>
					<view class="margin_top2" v-for="ite in item.childlist" :key="ite.id"
						style="margin-left: 80rpx;">
						<view class="flextop" style="justify-content: flex-start;">
							<image class="plxtx margin_right2" :src="ite.user.avatar_text" mode="">
							</image>
							<view class="">
								<view class="strongtext xiaohui ">{{ite.user.nickname}}</view>
								<view class="strongtext xiaohei margin_top1">{{ite.content}}</view>
								<view class="smalltext xiaohui margin_top1">{{ite.createtime_text}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="gudingdb ffffff mainpadding">
			<view class="fybox flexbetween">
				<input placeholder="说点什么吧" type="text" :focus="focus" @blur="focus=false;pid=''" v-model="contents" @confirm="sendmsg" />
				<view class="fsbtn flexcenter"  @click="sendmsg">发送</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid: "",
				dataAll:{},
				page: 1,
				list: {
					data: []
				},
				pid:"",
				focus: false,
				contents: "",
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.getDetail()
			this.init()
		},
		methods: {
			sendmsg() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				if (this.contents == "") {
					httpRequest.toast("评论内容不能为空")
					return false
				}
				let data = {
					goods_comment_id: this.listid,
					pid: this.pid,
					content: this.contents,
				}
				let url = '/api/goodscl/addGoodsCommentItem';
				httpRequest.request(url, 'GET', data).then(res => {
					if (res.code == 1) {
						this.pid = ""
						this.contents = ""
						this.init()
					} else {
						httpRequest.toast(res.msg)
					}
				})
			},
			init(isPage, page) {
				let _this = this
				httpRequest.request('/api/goodscl/goodsCommentItemIndex', 'GET', {
					page: page || 1, 
					limit: 12,
					goods_comment_id: this.listid,
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			getDetail() {
				httpRequest.request('/api/goodscl/goodsCommentDetail', 'GET', {
					id: this.listid
				}, false, false, false).then(res => {
					this.pageShow = true
					this.dataAll = res.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.huibox {
		background: #F5F5F5;
		border-radius: 11rpx 11rpx 11rpx 11rpx;
	}
	.touxiag {
		width: 73rpx;
		border-radius: 50%;
		height: 73rpx;
	
	}
	.scyyzz {
		width: 100%;
		height: 291rpx;
	}
	
	.tpbox {
		width: 33.33%;
		margin-top: 30rpx;
	}
	
	.tjtp {
		width: 209rpx;
		height: 209rpx;
		position: relative;
	
		image {
			border-radius: 10rpx;
			width: 100%;
			height: 100%;
		}
	}
	.tupian {
		width: 140rpx;
		height: 140rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
	}
	
	.touxiang {
		width: 73rpx;
		height: 73rpx;
		border-radius: 50%;
	}
	.plxtx {
		width: 42rpx;
		height: 42rpx;
		border-radius: 50rpx;
	}	
	.pldtx {
		width: 77rpx;
		height: 77rpx;
		border-radius: 50rpx;
	}
	.fsbtn {
		width: 102rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		height: 56rpx;
		background: #FF9341;
		border-radius: 38rpx 38rpx 38rpx 38rpx;
	}

	.fybox {
		box-sizing: border-box;
		padding: 12rpx 10rpx 10rpx 30rpx;
		width: 100%;
		height: 70rpx;
		background: #F3F3F3;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
	}

	.touxiang1 {
		width: 42rpx;
		height: 42rpx;
	}

	.xiahuaxian:last-child {
		border: none;
		padding-bottom: 0;
	}

	.tupian {
		width: 140rpx;
		height: 140rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
	}

	.touxiang {
		width: 73rpx;
		height: 73rpx;
		border-radius: 50%;
	}
</style>